<template>
  <div class="topic-review-container">
    <el-card>
      <h2>学生选题审核</h2>

      <!-- 筛选条件 -->
      <div class="filter-bar">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索学生姓名/学号"
          clearable
          style="width: 300px; margin-right: 15px"
        />
        <el-button type="primary" @click="loadPendingTopics">查询</el-button>
      </div>

      <!-- 待审核选题列表 -->
      <el-table :data="pendingTopics" v-loading="loading">
        <el-table-column prop="studentName" label="学生姓名" width="120" />
        <el-table-column prop="studentId" label="学号" width="150" />
        <el-table-column label="选题列表" min-width="400">
          <template slot-scope="{row}">
            <div v-for="topic in row.topics" :key="topic.topicid" class="topic-item">
              <div class="topic-title">{{ topic.title }}</div>
              <div class="topic-desc">{{ topic.description }}</div>
              <div class="topic-meta">
                <span>创建时间: {{ formatTime(topic.createtime) }}</span>
                <span>课题id: {{ topic.topicid }}</span>
                <el-button
                  size="mini"
                  type="success"
                  @click="handleApprove(row.studentId, topic.topicid)"
                >通过此选题</el-button>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="{row}">
            <el-button
              type="danger"
              size="mini"
              @click="openRejectDialog(row.studentId)"
            >全部驳回</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        @current-change="handlePageChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="total, prev, pager, next, jumper"
      />
    </el-card>

    <!-- 驳回原因对话框 -->
    <el-dialog
      :visible.sync="rejectDialogVisible"
      title="驳回原因"
      width="500px"
    >
      <el-input
        v-model="rejectReason"
        type="textarea"
        :rows="4"
        placeholder="请填写驳回原因..."
      />
      <div slot="footer">
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handleReject"
          :disabled="!rejectReason"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      searchKeyword: '',
      pendingTopics: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      rejectDialogVisible: false,
      rejectReason: '',
      currentStudentId: null
    };
  },
  computed: {
    teacherId() {
      return localStorage.getItem('userid');
    }
  },
  mounted() {
    this.loadPendingTopics();
  },
  methods: {
    // 加载待审核选题
    async loadPendingTopics() {
      this.loading = true;
      try {
        const params = {
          teacherId: this.teacherId,
          page: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          keyword: this.searchKeyword
        };

        const res = await this.$axios.get('/topic/pending-review', { params });
        this.pendingTopics = res.data.list;
        this.pagination.total = res.data.total;
      } catch (error) {
        console.error('加载待审核选题失败', error);
        this.$message.error('加载数据失败');
      } finally {
        this.loading = false;
      }
    },

    // 时间格式化
    formatTime(time) {
      return new Date(time).toLocaleString();
    },

    // 通过选题
    async handleApprove(studentId, topicid) {
      console.log(topicid)
      try {
        await this.$axios.post('/topic/review', {
          studentId,
          approvedTopicId: topicid
        });
        this.$message.success('选题已通过');
        this.loadPendingTopics();
      } catch (error) {
        this.$message.error('操作失败: ' + ((error.response && error.response.data && error.response.data.message) || error.message));
      }
    },

    // 打开驳回对话框
    openRejectDialog(studentId) {
      this.currentStudentId = studentId;
      this.rejectReason = '';
      this.rejectDialogVisible = true;
    },

    // 处理驳回
    async handleReject() {
      try {
        await this.$axios.post('/topic/review', {
          studentId: this.currentStudentId,
          approvedTopicId: 0,
          reason: this.rejectReason
        });
        this.$message.warning('选题已驳回');
        this.rejectDialogVisible = false;
        this.loadPendingTopics();
      } catch (error) {
        this.$message.error('操作失败: ' + ((error.response && error.response.data && error.response.data.message) || error.message));
      }
    },

    // 分页变化
    handlePageChange(page) {
      this.pagination.currentPage = page;
      this.loadPendingTopics();
    }
  }
};
</script>

<style scoped>
.topic-review-container {
  padding: 20px;
}

.filter-bar {
  margin-bottom: 20px;
  display: flex;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.topic-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  &:last-child {
    border-bottom: none;
  }
}

.topic-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.topic-desc {
  color: #666;
  margin-bottom: 8px;
  font-size: 14px;
}

.topic-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
}
</style>
